<template>
  <div class="page">
    <div class="record-list">
      <div class="J-record-data" v-if="!isData">
        <div class="weui-flex">
          <div class="weui-flex__item">
            <div class="record_dada">
              <span class="fl">已消费</span>
              <span class="fr"><em class="color-1">{{getStatistics.totalNum || 0}}</em>笔</span>
            </div>
          </div>
          <div class="weui-flex__item">
            <div class="record_dada">
              <span class="fl">共支付</span>
              <span class="fr"><em class="color-1">{{getStatistics.totalPayPrice || 0}}</em>元</span>
            </div>
          </div>
        </div>
        <div class="weui-flex">
          <div class="weui-flex__item">
            <div class="record_dada">
              <span class="fl">共为你节省了</span>
              <span class="fr"><em class="color-1">{{(getStatistics.totalGsPrice - getStatistics.totalPayPrice) | toFixed}}</em>元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="J-record-list" v-if="!isData">
        <div class="v_content">
          <get-data :scroller-data="getRefuelingshowList" :config="config"  ref="scroller" :type="type">
            <div class="weui-flex" v-for="item in getRefuelingshowList.data">
              <div class="weui-flex__item line-bottom pl">
                <router-link :to="{ path: '/refueling/show', query: { id: item.orderNo }}" class="record_a weui-cell_access">
                  <div class="record_">
                    <span class="fl">{{item.gsName}}</span>
                    <span class="fr">节省<em class="b c">￥{{((parseFloat(item.gsPrice)  + parseFloat(item.noGasItemPrice)) - parseFloat(item.payPrice)) | toFixed}}</em></span>
                  </div>
                  <div class="record_">
                    <span class="fl font-12 color-1">{{item.createTime}}</span>
                    <span class="fr font-12">实付<em class="b">￥{{item.payPrice}}</em></span>
                  </div>
                </router-link>
              </div>
            </div>
          </get-data>
        </div>
      </div>
      <no-data :title="title" v-if='isData'></no-data>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import GetData from '~components/mixins/getData.vue'
  import NoData from '~components/mixins/no-data.vue'
  export default {
    name: 'refueling',
    data () {
      return {
        isData: false,
        type: 'getRefuelingshowList',
        title: '暂时找不到加油记录',
        config:{
          id: this.$route.query.car_id,
          page:'1'
        }
      }
    },
    components: {
      GetData,
      NoData
    },
    computed: {
      ...mapGetters({
        getRefuelingshowList: 'getRefuelingshowList',
        getStatistics: 'getStatistics'
      })
    },
    mounted () {
      var _this = this
      if (_this.getRefuelingshowList.data.length == 0 || _this.getRefuelingshowList.code == '404') {
        _this.$refs.scroller.getData(this.config.id)
      }
      if (_this.getRefuelingshowList.code == '404') {
        this.isData = true
      }
    }
  }
</script>
<style lang="scss">
  .J-record-data{
    .weui-flex{
      padding-right:10px;
    }
    .record_dada{
      overflow: hidden;
      padding:5px 10px;
      margin:10px 0 0 10px;
      background-color:#fff;
      font-size:14px;
      em{
        font-style:normal;
        margin-right:5px;
      }
    }
  }
  .record-list{
    height:100%;
  }
  .J-record-list{
    padding:0 8px;
    height: calc(100% - 94px);
    margin-top:10px;
    box-sizing: border-box;
    background-color:#fff;
    .v_content{
      position: relative;
      width:100%;
      height:100%;
    }
    .J-loadmore{
      padding:20px 0 0 0;
    }
    .weui-flex__item:after{
      bottom:-10px;
    }
    .weui-flex{
      padding:10px 0;
    }
    .record_a{
      color:#333;
    }
    .record_{
      overflow: hidden;
      font-size: 14px;
      em {
        font-style: normal;
        color: #009900;
        margin-right: 5px;
      }
      .c{
        color:#f14c20;
      }
    }
  }
</style>
